<!-- MarkdownComment.vue -->
<template>
  <div>
    <MarkdownEditor v-model="markdownContent" :options="editorOptions" />
  </div>
</template>

<script setup>
import { ref } from 'vue';
import MarkdownEditor from 'markdown-editor-v3';
import commentsData from '../components/commentsData.js';

// 将评论数据转换为 Markdown 格式
const convertCommentsToMarkdown = (comments) => {
  let markdown = '';
  comments.forEach(comment => {
    markdown += `### ${comment.author} - ${comment.createdAt}\n`;
    markdown += `${comment.content}\n\n`;

    if (comment.replies && comment.replies.length > 0) {
      comment.replies.forEach(reply => {
        markdown += `#### 回复 @${reply.replyTo} - ${reply.author} - ${reply.createdAt}\n`;
        markdown += `${reply.content}\n\n`;
      });
    }
  });
  return markdown;
};

const markdownContent = ref(convertCommentsToMarkdown(commentsData));
const editorOptions = {
  // 可以根据需要配置编辑器选项
  readonly: true, // 设置为只读模式，仅用于显示评论
};
</script>

<style scoped>
/* 可以根据需要添加样式 */
</style>